/* eslint-disable @typescript-eslint/prefer-as-const */
import { Progress, Tag } from "antd";
import { UploadResultStatus, type FileBasicColumn, type FileItem, type PreviewFileItem } from "../typing";
import { isImgTypeByName } from "../helper";
import ThumbUrl from "../ThumbUrl/index";
import TableAction from "@/components/Table/components/TableAction";
import { useTranslation } from "react-i18next";
import { ActionItem, BasicColumn } from "@/components/Table";

// 文件上传列表
export function createTableColumns(): FileBasicColumn[] {
	const { t } = useTranslation();
	return [
		{
			dataIndex: "thumbUrl",
			title: t("component.upload.legend"),
			width: 100,
			render: (text: string, record: FileItem) => {
				const { thumbUrl } = record || {};
				return thumbUrl ? <ThumbUrl fileUrl={thumbUrl} /> : null;
			}
		},
		{
			dataIndex: "name",
			title: t("component.upload.fileName"),
			align: "left" as "left",
			render: (text: string, record: FileItem) => {
				const { percent = 0, status: uploadStatus = "" } = record || {};
				let status: "normal" | "exception" | "active" | "success" = "normal";
				if (uploadStatus === UploadResultStatus.ERROR) status = "exception";
				else if (uploadStatus === UploadResultStatus.UPLOADING) status = "active";
				else if (uploadStatus === UploadResultStatus.SUCCESS) status = "success";

				return (
					<div>
						<p className="mb-1 max-w-70 truncate" title={text}>
							{text}
						</p>
						<Progress percent={percent} size="small" status={status} />
					</div>
				);
			}
		},
		{
			dataIndex: "size",
			title: t("component.upload.fileSize"),
			width: 100,
			render: (text: number) => text && `${(text / 1024).toFixed(2)}KB`
		},
		{
			dataIndex: "status",
			title: t("component.upload.fileStatue"),
			width: 100,
			render: (text: string) => {
				switch (text) {
					case UploadResultStatus.SUCCESS:
						return <Tag color="green">{t("component.upload.uploadSuccess")}</Tag>;
					case UploadResultStatus.ERROR:
						return <Tag color="red">{t("component.upload.uploadError")}</Tag>;
					case UploadResultStatus.UPLOADING:
						return <Tag color="blue">{t("component.upload.uploading")}</Tag>;
					default:
						return text || t("component.upload.pending");
				}
			}
		}
	];
}

export function createActionColumn(handleRemove: (record: FileItem) => void): FileBasicColumn {
	const { t } = useTranslation();
	return {
		width: 120,
		title: t("component.upload.operating"),
		dataIndex: "action",
		fixed: false,
		render: (_: any, record: FileItem) => {
			const actions: ActionItem[] = [
				{
					label: t("component.upload.del"),
					danger: true,
					onClick: () => handleRemove(record)
				}
			];
			return <TableAction actions={actions} outside={true} />;
		}
	};
}

// 文件预览列表
export function createPreviewColumns(): BasicColumn[] {
	const { t } = useTranslation();
	return [
		{
			dataIndex: "url",
			title: t("component.upload.legend"),
			width: 100,
			render: (text: string, record: PreviewFileItem) => {
				const { url } = record || {};
				return isImgTypeByName(url) ? <ThumbUrl fileUrl={url} /> : null;
			}
		},
		{
			dataIndex: "name",
			title: t("component.upload.fileName"),
			align: "left" as "left"
		}
	];
}

export function createPreviewActionColumn({
	handleRemove,
	handleDownload
}: {
	handleRemove: (record: PreviewFileItem) => void;
	handleDownload: (record: PreviewFileItem) => void;
}): BasicColumn {
	const { t } = useTranslation();
	return {
		width: 160,
		title: t("component.upload.operating"),
		dataIndex: "action",
		fixed: false,
		render: (_: any, record: PreviewFileItem) => {
			const actions: ActionItem[] = [
				{
					label: t("component.upload.del"),
					danger: true,
					onClick: () => handleRemove(record)
				},
				{
					label: t("component.upload.download"),
					onClick: () => handleDownload(record)
				}
			];

			return <TableAction actions={actions} outside={true} />;
		}
	};
}
